{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,sendKeyWord %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@jquery_ui_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {{ gridKeyword('Business group name'|trans) }}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div id="dialog-confirm" class="hide row">
        <div class="row" style="margin-left: 30px">
            <label class="col-xs-10 col-sm-2" style="width: auto;text-align: center;margin-top: 5px">{{ 'Business group name'|trans }}</label>
            <input type="text" id="groupname" value="" class="col-xs-10 col-sm-10" style="width: auto" maxlength="20" />
        </div>
        <div class="hide row" id="remark-confirm" style="text-align: center;margin-top: 2px">
            <span id="prompt" style="color: red"></span>
        </div>
        <div class="row" style="text-align: center;margin-top: 8px">
            <button id="remark-btns" type="button" class="btn btn-success btn-sm" data-loading-text="Loading...">
                {{ 'Save'|trans }}
            </button>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var rowId = 0;
        var oper;
        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                url: "{{ path('icsoc_business_group_list') }}",  //数据；
                colNames:['{{ 'actions'|trans }}', '{{ 'Business group name'|trans }}','','{{ 'Distribution'|trans }}'],
                colModel:[
                    {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                        formatter:'actions',
                        formatoptions:{
                            keys:true,
                            editbutton:true,
                            editformbutton: true,
                            delOptions:{width: "300px",recreateForm: true, beforeShowForm:beforeDeleteCallback, afterSubmit:afterDeleteCallback,left:540,top:206},
                            editOptions:{width: "0",height: "0", jqModal:false, display:'none', beforeShowForm:beforeEditCallback }
                        }
                    },
                    {name:'group_name',index:'group_name',width:800, editable: true, sortable:false},
                    {name:'group_id',index:'group_id',hidden:true,editable: true, key:true, sortable:false},
                    {name:'ids',width:80,index:'ids',editable:false,ortable:false, formatter:function(cellvalue, options, rowObject){
                        return "<span onclick='distribution("+rowObject.group_id+")' style='cursor:pointer' class='btn btn-xs ace-icon fa fa-eye'>{{ 'Distribution'|trans }}</span>";
                    }}
                ],
                {{ gridConfig() }}
                sortname: 'group_id',
                editurl: "{{ path('icsoc_business_group_allot') }}",
                caption: "{{ 'Business group list'|trans }}",
                onSelectRow:function(id,status){
                    rowId = id;
                }
            });
            {{ gridNav(false,false,true,false,true,false,false,false,'Delete Message'|trans()) }}
            jQuery(grid_selector).jqGrid('navGrid',pager_selector).navButtonAdd(pager_selector,{caption:'',title:'{{ 'Add'|trans }}',buttonicon:'ace-icon fa fa-plus-circle purple',onClickButton:function(){
                addgroup();
            }});
        });
        {{ sendKeyWord() }}
        function beforeEditCallback(e){
            editgroup();
        }
        //添加
        function addgroup(){
            $("#remark-confirm").addClass('hide');
            oper = 'add';
            $('#groupname').val('');
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: false,
                title_html: true,
                height:140,
                width:350,
                title: "{{ 'Add Business Group'|trans }}"
            });
        }

        //修改
        function editgroup(){
            $("#lui_grid-table").remove();
            $("#remark-confirm").addClass('hide');
            oper = 'edit';
            var rowData = $("#grid-table").jqGrid('getRowData',rowId);
            $('#groupname').val(rowData.group_name);
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: false,
                title_html: true,
                height:140,
                width:350,
                title: "{{ 'Edit Business Group'|trans }}"
            });
        }

        //保存
         $('#remark-btns').on('click', function(){
            var remark = $.trim($('#groupname').val());
            if (!remark) {
                $("#prompt").text("{{ 'Business group name cannot be empty'|trans }}");
                $("#remark-confirm").removeClass('hide');
                $("#groupname").focus();
                return false;
            }

             {#$.ajax({#}
                 {#url: "{{ path('icsoc_business_group_check') }}",#}
                 {#dataType: 'json',#}
                 {#data: {group_name: remark, id: rowId},#}
                 {#type: 'post',#}
                 {#success: function(response) {#}
                     {#if (response.code == 200) {#}
                         $.ajax({
                             url: "{{ path('icsoc_business_group_allot') }}",
                             dataType: 'json',
                             data: {oper:oper, group_name: remark, id: rowId},
                             type: 'post',
                             success: function(response) {
                                 if (response.code == 200) {
                                     $('#groupname').val('');
                                     $("#remark-confirm").addClass('hide');
                                     $("#dialog-confirm").dialog("close");
                                     jQuery("#grid-table").trigger('reloadGrid');
                                 } else {
                                     {#gritterAlert("{{ 'Alert'|trans }}", response.message, 'error');#}
                                     $("#prompt").text(response.message);
                                     $("#remark-confirm").removeClass('hide');
                                     $("#groupname").focus();
                                 }
                             }
                         });
                     {#} else {#}
                         {#&#123;&#35;gritterAlert("{{ 'Alert'|trans }}", response.message, 'error');&#35;&#125;#}
                         {#$("#prompt").text(response.message);#}
                         {#$("#remark-confirm").removeClass('hide');#}
                         {#$("#groupname").focus();#}
                     {#}#}
                 {#}#}
             {#});#}
        });
        function distribution(group_id)
        {
            window.location.href = '{{ path('icsoc_business_group_batch') }}?group_id='+group_id;
        }
    </script>
{% endblock %}